<template>
  <mt-tabbar fixed class="tabar">
    <mt-tab-item :id="tab.title" v-for="tab in tabs" :key="tab.title">
      <router-link :to="tab.router">
        <div><i class="iconfont" :class="tab.icon"></i></div>
        <div>{{tab.title}}</div>
      </router-link>
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
  /**
   * @module common/plugins/footer
   * @author ashen
   * @description 页脚
   * @example <dc-footer></dc-footer>
   */
  export default {
    data () {
      return {
        value: '',
        tabs: [
          {
            title: '首页',
            router: '/home/reports',
            icon: 'icon-tab-home'
          },
          {
            title: '消息',
            router: '/inform',
            icon: 'icon-tab-message'
          },
          {
            title: '我的',
            router: '/personal',
            icon: 'icon-tab-user'
          }
        ],
        selected: '首页'
      };
    },
    methods: {}
  };
</script>

<style scoped lang="scss">
  @import "../assets/css/variable";

  .tabar {
    height: px2rem(98px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 px2rem(-4px) px2rem(5px) px2rem(5px) rgba(99, 99, 99, .05);
    .mint-tab-item-label i {
      font-size: px2rem(48px);
    }
    .mint-tab-item-label {
      font-size: px2rem(22px);
      color: #5e5f6e;
      .active {
        color: $theme-color;
      }
    }
    .mint-tab-item {
      padding: px2rem(7px) 0;
    }
  }
</style>
